<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="custom" tagdir="/WEB-INF/tags" %>
<html>
<head>
    <title>图文回复</title>
    <script type="text/javascript" charset="utf-8" src="${contextPath}/resources/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="${contextPath}/resources/ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="${contextPath}/resources/ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<div class="pageheader">
    <h2>图文回复</h2>
</div>
<div class="contentpanel">
    <div class="panel panel-default">

        <form:form commandName="formDto" cssClass="form-horizontal form-bordered">
            <form:hidden path="msgType"/>
            <div class="form-group">
                <label class="col-sm-3 control-label">关键字</label>

                <div class="col-sm-6">
                    <form:input path="keyWord" cssClass="form-control" placeholder="关键字"/>
                    <form:errors path="keyWord" cssClass="error text-danger"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">预定义事件</label>

                <div class="col-sm-6">
                    <label class="btn btn-info btn-sm subEvents" name="subscribe">关注事件</label>
                    <label class="btn btn-info btn-sm subEvents" name="unsubscribe">取消关注事件</label>
                </div>
            </div>
            <div id="items" class="col-sm-12">
                <br/>
                <c:forEach items="${formDto.articles.articleList}" var="item" varStatus="article">
                    <div index="${article.index} " class="itemDiv well">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">标题</label>

                            <div class="col-sm-6">
                                <form:input path="articles.articleList[${article.index}].title" cssClass="form-control"
                                            placeholder="回复标题"/>
                                <form:errors path="articles.articleList[${article.index}].title"
                                             cssClass="error text-danger"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">正文</label>

                            <div class="col-sm-6">
                                <form:textarea path="articles.articleList[${article.index}].description" rows="5"
                                               cssClass="form-control" placeholder="回复正文"/>
                                <form:errors path="articles.articleList[${article.index}].description"
                                             cssClass="error text-danger"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">回复图片</label>

                            <div class="col-sm-6">
                                <form:hidden path="articles.articleList[${article.index}].picUrl"
                                             cssClass="imageUrl"/>
                                <form:errors path="articles.articleList[${article.index}].picUrl"
                                             cssClass="error text-danger"/>
                                <img src="${formDto.articles.articleList[article.index].picUrl}" width="200px"
                                     height="200px" style="margin-bottom:10px;"
                                     class="${empty formDto.articles.articleList[article.index].picUrl?"hide":""} imagePreview"/>
                                <button class="btn btn-primary uploadImage" style="display: block" type="button">上传
                                </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">图片跳转地址</label>

                            <div class="col-sm-6">
                                <form:input path="articles.articleList[${article.index}].url"
                                            cssClass="form-control search-input"
                                            placeholder="请填写地址或搜索文章地址"/>
                                <form:errors path="articles.articleList[${article.index}].url"
                                             cssClass="error text-danger"/>
                            </div>
                        </div>
                    </div>
                </c:forEach>
                <div class="form-group">
                    <label class="col-sm-3 control-label"></label>

                    <div class="col-sm-6">
                        <button type="button" id="additme" class="btn btn-default">继续添加多条图文</button>
                        <button type="button" id="del" class="btn btn-default">删除上一条</button>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label"></label>

                <div class="col-sm-6">
                    <div class="content" id="content"></div>
                    <button type="submit" class="btn btn-primary">提交</button>
                    <a href="javascript:window.history.go(-1);" class="btn btn-default">取消</a>
                </div>
            </div>
        </form:form>
    </div>
</div>
<script type="text/javascript">
    var ue = UE.getEditor('content');
    var index = 0;
    ue.ready(function () {
        //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
        ue.hide();
        //侦听图片上传
        ue.addListener('beforeInsertImage', function (t, arg) {
            //将地址赋值给相应的input,只去第一张图片的路径
            $(".imageUrl:eq(" + index + ")").attr("value", arg[0].src);
            //图片预览
            $(".imagePreview:eq(" + index + ")").attr("src", arg[0].src).removeClass("hide");
        });
    });
    $(function () {
        $(".contentpanel").on("click", ".uploadImage", function () {
            index = $(".uploadImage").index(this);
            var myImage = ue.getDialog("insertimage");
            myImage.open();
        });

        $(".contentpanel").on("click", ".subEvents", function () {
            var name = $(this).attr('name');
            $("#keyWord").val(name);
        });

        $("#additme").click(function () {
            var lastItem = $(".itemDiv:last");
            var newIndex = parseInt(lastItem.attr("index")) + 1;
            var clone = lastItem.clone();
            clone.find("input").each(function () {
                var currentName = $(this).attr("name");
                $(this).attr("name", currentName.replace(/\[(\w+)\]/, '[' + newIndex + ']'));
                $(this).val("");
            });
            clone.find("textarea").each(function () {
                var currentName = $(this).attr("name");
                $(this).attr("name", currentName.replace(/\[(\w+)\]/, '[' + newIndex + ']'));
                $(this).val("");
            });
            clone.find(".imageUploadIframe").each(function () {
                $(this).attr("src", '${contextPath}/image/upload.htm?index=' + newIndex);
            });
            clone.find(".imagePreview").each(function () {
                $(this).addClass("hide");
            });
            clone.find(".search-input").each(function () {
                bindAutoComplete($(this));
            });
            clone.attr("index", newIndex);
            lastItem.after(clone);
        });
        $("#del").click(function () {
            if ($(this).hasClass("hide")) {
                return;
            }
            var parentNode = $(this).parents("#items");
            var childNode = parentNode.children(".itemDiv");
            if (childNode.length < 2) {
                alert("已经是最后一条了,不能删除!");
                return;
            }
            parentNode.children(".itemDiv:last").remove();
        });
        //动态绑定自动完成事件
        function bindAutoComplete(target) {
            $(target).autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "${contextPath}/admin/article/search_article",
                        dataType: "json",
                        data: {
                            key: request.term
                        },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.title,
                                    value: item.url
                                }
                            }));
                        }
                    });
                },
                minLength: 1,
                select: function (event, ui) {
                    if (ui.item) {
//                    $("#employeeUuid").val(ui.item.uuid);
                    }
                }
            });
        }

        bindAutoComplete($(".search-input"));

    });
</script>
</body>
</html>
